<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>04-props</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/prop-types.js"></script>
    <script src="./js/babel.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
    class Person extends React.Component {
        render() {
            const {title, list, flag} = this.props
            return (
                <div>
                    <p>{flag ? title : ''}</p>
                    <ul>
                        <li>姓名：{list[0].name}</li>
                        <li>年龄：{list[0].age}</li>
                        <li>性别：{list[0].sex}</li>
                    </ul>
                </div>
            )
        }

    }

    // 属性校验
    Person.propTypes = {
        title: PropTypes.string.isRequired,
        list: PropTypes.array,
        flag: PropTypes.bool
    }

    // 设置默认属性
    Person.defaultProps = {
        list: [],
        flag: true
    }

    const list = [
        {name: '夏老师', age: 35, sex: '男'},
        {name: '看老师', age: 40, sex: '女'},
        {name: '换老师', age: 35, sex: '男'},
    ]

    ReactDOM.render(<Person list={list} title={'老师列表'}/>, document.getElementById('app'));
</script>
</html>
